<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>画布时钟</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #clockcvs{
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <a href="https://github.com/Chinegoodman" target="_blank"><img width="40px" src="http://ooo0o.com/cf6aa201904191633225163.png" alt="github"></a>
    <div id="cvsbox">
        <canvas id="clockcvs"></canvas>
    </div>
    <button onclick="jieping()">获取此刻的时间截屏</button>
    <script>
        // ===========================================截屏事件 开始===========================================
        function jieping(){
            let imgdata = document.getElementById('clockcvs').toDataURL('image/png');
            console.log(imgdata)
            downloadFile('当前时刻.png',imgdata);
        }
        // ===========================================截屏事件 结束===========================================

        // ===========================================文件自动下载 开始===========================================
        function downloadFile(fileName, dataurl){
            let alink = document.createElement('a');
            alink.download=fileName;
            alink.href = dataurl;
            alink.target = '_blank';
            alink.click();
        }
        // ===========================================文件自动下载 结束===========================================
    </script>
    <script src="./psf_fashion_clock.js"></script>
    <script>
        let viewwidth = document.documentElement.clientWidth;
        if(viewwidth<716){
            viewwidth = 716;
            let scalenum = document.documentElement.clientWidth/716;

            document.getElementById('clockcvs').style.transformOrigin = '0 0'
            document.getElementById('clockcvs').style.transform = 'scale('+scalenum+','+scalenum+')';
            document.getElementById('clockcvs').parentNode.style.height = 716*scalenum +'px';
        }else if(viewwidth > 780){
            viewwidth = 780;
        }
        let cvsparams = {
            // 选择器==画布宽高值==中间的字==中间字大小==时间字体大小==圆盘背景色==背景图片==中间字颜色==时间字体颜色==画布背景色(默认透明)==圆盘的outline色
            selectdom:'div>#clockcvs',      //选择器
            cvswh:viewwidth,      //画布宽高值
            word:'庞',      //中间的字
            wordsize:'',      //中间字大小
            timesize:'',      //时间字体大小
            bgclolr:'',      //圆盘背景色
            bgpic:'',      //背景图片
            wordcolor:'',      //中间字颜色
            timecolor:'',      //时间字体颜色
            boxbgclolr:'',      //画布背景色(默认透明)
            outlinecolor:'',      //圆盘的outline色
            currentboxcolor:''      //当前时间框的填充色
        }
        fashionclock(cvsparams)
    </script>
</body>
</html>